import React, { Component } from 'react';
import { View } from 'react-native';
import ChooseBtn from 'bee/components/MakePlan/ChooseBtn';
import { pickerOptions, createDateData } from 'bee/pickerOptions';
import Picker from 'react-native-picker';
import { Item, Input } from 'bee/components/CompleteInfo';
import { RadioPicker } from 'bee/components/MakePlan';
import { Languages } from 'bee/constants/Languages';
import { Selectors } from 'bee/constants';

// @flow
type Props = {
  changeInfo: Function,
  info: object,
  data: Array,
  id: number,
};

class BeneInfo extends Component<Props> {
  constructor(props) {
    super(props);

    const {
      relation,
      cardType,
      name,
      idCard,
      birth,
      sex,
      order,
      scale,
      phone,
    } = this.props.info;

    this.state = {
      relation, // 受益人和被保险人的关系
      cardType, // 制定受益人证件类型
      name, // 姓名
      idCard, // 证件号码
      birth, // 出生日期
      sex, // 性别
      order, // 受益顺序
      scale, // 受益比例
      phone, // 手机号码
    };

    this.showRelations = this.showRelations.bind(this);
    this.showCardTypes = this.showCardTypes.bind(this);
    this.showDatePicker = this.showDatePicker.bind(this);
    this.showOrders = this.showOrders.bind(this);
    this.changeField = this.changeField.bind(this);
  }

  showOrders() {
    const date = new Array(5).fill('受益顺序');
    const options = pickerOptions(date, order => {
      this.changeField({ order: order[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  showRelations() {
    const data = Selectors.relations;
    const options = pickerOptions(data, relation => {
      this.changeField({ relation: relation[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  showCardTypes() {
    const date = new Array(5).fill('证件类型');
    const options = pickerOptions(date, cardType => {
      this.changeField({ cardType: cardType[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  showDatePicker() {
    const date = createDateData();
    const options = pickerOptions(date, birth => {
      this.changeField({ birth: birth[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  changeField(state) {
    this.setState(state, () => {
      const { data, id } = this.props;
      data[id] = this.state;
      this.props.changeInfo(data);
    });
  }

  render() {
    const { changeField } = this;

    return (
      <View>
        <Item title={Languages.favoree} />
        <Item title={Languages.benefitRelation}>
          <ChooseBtn text={this.state.relation} onPress={this.showRelations} />
        </Item>
        <Item title={Languages.cardType}>
          <ChooseBtn text={this.state.cardType} onPress={this.showCardTypes} />
        </Item>
        <Item title={Languages.benefitName}>
          <Input
            value={this.state.name}
            onChangeText={name => {
              this.changeField({ name });
            }}
          />
        </Item>
        <Item title={Languages.idNum}>
          <Input
            value={this.state.idCard}
            onChangeText={idCard => changeField({ idCard })}
          />
        </Item>
        <Item title={Languages.birthDate}>
          <ChooseBtn text={this.state.birth} onPress={this.showDatePicker} />
        </Item>
        <Item title={Languages.gender}>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            {['男', '女'].map((value, index) => (
              <RadioPicker
                key={index}
                index={index}
                value={value}
                isSelected={this.state.sex === index}
                onPress={() => {
                  changeField({ sex: index });
                }}
              />
            ))}
          </View>
        </Item>
        <Item title={Languages.benefitOrder}>
          <ChooseBtn text={this.state.order} onPress={this.showOrders} />
        </Item>
        <Item title={Languages.benefitScale}>
          <Input
            value={this.state.scale}
            onChangeText={scale => changeField({ scale })}
          />
        </Item>
        <Item title={Languages.phoneNum}>
          <Input
            value={this.state.phone}
            onChangeText={phone => changeField({ phone })}
          />
        </Item>
      </View>
    );
  }
}

export default BeneInfo;
